<template>
	<el-card shadow="hover" header="欢迎">
		<div class="welcome">
			<div class="logo">
				<img src="/images/logo.png">
				<h2>欢迎体验</h2>
        <h4 style="color: #8c939d">本项目基于electron+scui构建完成</h4>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-menu/></el-icon></div>
					<div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-promotion/></el-icon></div>
					<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-milk-tea/></el-icon></div>
					<div class="tips-item-message">项目目的：让前端工作更快乐</div>
				</div>
			</div>
      <h3 style="margin: 10px auto" align="center">技术选型</h3>
      <el-row justify="space-around">
        <el-col :span="6">
          <h4 class="tecname">后端技术</h4>
          <ul class="tec">
            <li><el-tag effect="light">Spring Boot 2 </el-tag></li>
            <li><el-tag effect="light">Spring Security 5.6.3</el-tag></li>
            <li><el-tag effect="light">Hutool 5.8.0</el-tag></li>
            <li><el-tag effect="light">MyBatis-Plus 3.5.1</el-tag></li>
            <li><el-tag effect="light">Logback</el-tag></li>
            <li><el-tag effect="light">...</el-tag></li>
          </ul>
        </el-col>
        <el-col :span="6">
          <h4 class="tecname">前端技术</h4>
          <ul class="tec">
            <li><el-tag effect="light">Vue3</el-tag></li>
            <li><el-tag effect="light">Vue-Router</el-tag></li>
            <li><el-tag effect="light">Pinia</el-tag></li>
            <li><el-tag effect="light">Element-Plus</el-tag></li>
            <li><el-tag effect="light">Axios</el-tag></li>
            <li><el-tag effect="light">Wangeditor</el-tag></li>
            <li><el-tag effect="light">Crypto.js</el-tag></li>
            <li><el-tag effect="light">Echarts</el-tag></li>
            <li><el-tag effect="light">...</el-tag></li>
          </ul>
        </el-col>
      </el-row>
			<div class="actions">
				<el-button type="primary"  size="default" @click.stop="openExternal('https://www.electronjs.org/zh/')">electron官网</el-button>
				<el-button type="primary"  size="default" @click.stop="openExternal('https://gitee.com/lolicode/scui')">SCUI仓库</el-button>
				<el-button type="primary"  size="default" @click.stop="openExternal('https://lolicode.gitee.io/scui-doc/')">SCUI文档</el-button>
				<el-button type="primary"  size="default" @click.stop="openExternal('https://gitee.com/opendeer/xiaoluxian_vue')">鹿线开源</el-button>
			</div>
		</div>
	</el-card>
</template>

<script>
	export default {
		title: "欢迎",
		icon: "el-icon-present",
		description: "项目特色以及文档链接",
		data() {
			return {

			}
		},
		methods: {
      openExternal(URL){
        window.electron.ipcRenderer.invoke('renderer-to-main', {
          name: 'open-browser-url',
          event: 'event',
          data: URL
        })
      }
		}
	}
</script>

<style scoped lang="less">
	.welcome {}
	.welcome .logo {text-align: center;}
	.welcome .logo img {vertical-align: bottom;width: 50px;height: 50px;margin-bottom: 20px;}
	.welcome .logo h2 {font-size: 30px;font-weight: normal;display: flex;align-items: center;justify-content: center;}

	.tips {margin-top: 10px;padding:0 10px;}
	.tips-item {display: flex;align-items: center;justify-content: center;padding:7.5px 0;}
	.tips-item-icon {width: 20px;height:20px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 18px;margin-right: 20px;color: var(--el-color-primary);background: rgba(180,180,180,0.1);}
	.tips-item-message {flex: 1;font-size: 14px;}

	.actions {text-align: center;margin: 40px 0 20px 0;}
  .tec{
    li{
      padding: 4px 0;
      list-style: none;
    }
  }
  .tecname{
    margin-bottom: 10px;
  }
</style>
